<template>
	<el-header style="padding: 0; --el-header-padding:0" class="header">
		<el-menu :default-active="activeMenu" mode="horizontal" :ellipsis="false">
			<el-menu-item index="0">
				<el-image :src="icon_image" fit="contain" style="width: 100px; height: 50px;"/>
			</el-menu-item>
			<template v-for="item in resultMenu">
				<el-menu-item
					v-if="item.show"
					:key="item.index"
					:index="item.index"
					@click="toPage(item)"
				>{{ item.showName }}
				</el-menu-item>
			</template>
			<el-menu-item index="6" style="margin-left: auto">
				<el-switch v-model="isDark" :active-action-icon="Sunny" :inactive-action-icon="Moon"/>
			</el-menu-item>
			<el-sub-menu index="99">
				<template #title>
					<div style="height: 100%; display: flex; align-items: center; overflow: hidden;">
						<el-image  :src="avatar" fit="contain"
								  style="width: 50px; height: 50px;border-radius: 50%"/>

					</div>
				</template>
				<el-menu-item index="99-1" @click="toUserInfo">个人中心</el-menu-item>
				<el-menu-item index="99-99" @click="handleLogout">退出</el-menu-item>
			</el-sub-menu>
		</el-menu>
	</el-header>
</template>

<script setup lang="ts">
import {isDark} from '/@/theme/dark'
import icon_image from '/src/assets/icon.png'
import header_image from '/src/assets/header.png'
import {Sunny, Moon} from "@vicons/ionicons5";
import {useUserConfig} from "/@/stores/UserInfoConfig";
import {useRouter} from 'vue-router'
import {resultMenu} from "/@/router/menu";


const router = useRouter()

const useUser = useUserConfig();
const {userInfo} = storeToRefs(useUser);
const activeMenu = ref('1')

const avatar = computed(()=> {
	return userInfo.value?.user_info?.avatar ? '/api/' + userInfo.value.user_info.avatar : header_image
})


import {useLogout} from '/@/components/hzsystem/LoginPublicFuncation';

const {handleLogout} = useLogout()


const toPage = (route: Object) => {
	router.push({
		path: route.path,
	})
}

const toUserInfo = () => {
	router.push({name: 'UserInfo'})
}
</script>

<style scoped lang="css">
.header {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1),
	0 1px 2px rgba(0, 0, 0, 0.06);
}

:global(.el-header) {
	--el-header-padding: 0;
	padding: 0;
}

/* 或者使用深度选择器 */
::v-deep .el-header {
	padding: 0;
}
</style>
